<template>
  <div class="count-box">
    <button @click="handleSub">-</button>
    <!-- 使用 v-model 双向绑定，并确保输入值为数字 -->
    <input v-model.number="internalValue" class="inp" type="text">
    <button @click="handleAdd">+</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue'

// 定义 props
const props = defineProps({
  value: {
    type: Number,
    default: 1
  }
})

// 定义 emit
const emit = defineEmits(['update:modelValue'])  // 使用 update:modelValue 作为事件

// 内部值，用于双向绑定
const internalValue = ref(props.value)

// 监听 props.value 变化，更新 internalValue
watch(() => props.value, (newValue) => {
  internalValue.value = newValue
})

// 处理加法
const handleAdd = () => {
  // 确保 internalValue 是数字类型
  internalValue.value = Number(internalValue.value) + 1
  emit('update:modelValue', internalValue.value)
}

// 处理减法
const handleSub = () => {
  if (internalValue.value > 1) {
    internalValue.value = Number(internalValue.value) - 1
    emit('update:modelValue', internalValue.value)
  }
}
</script>

<style lang="less" scoped>
.count-box {
  width: 110px;
  display: flex;
  .add, .minus {
    width: 30px;
    height: 30px;
    outline: none;
    border: none;
    background-color: #efefef;
  }
  .inp {
    width: 40px;
    height: 30px;
    outline: none;
    border: none;
    margin: 0 5px;
    background-color: #efefef;
    text-align: center;
  }
}
</style>
